Rechercher
4 - Responsive
L'UI Composer permet de créer des applications statiques en utilisant des positions et des tailles absolues, ce qui constitue l'approche la plus simple pour concevoir une application.
Par défaut, la page s'adapte à sa largeur pour éviter l'apparition d'une barre de défilement horizontale.
Cependant, pour obtenir un rendu optimal, il est conseillé de désactiver cette option et de privilégier l'utilisation des ancres dans les widgets pour concevoir des applications responsive.
Nous allons aborder ensemble les trois concepts clés nécessaires pour réaliser cela.
L'ancrage
Introduit dans chaque widgets, le système d'ancrage est un mécanisme permettant de définir comment les éléments d'une interface utilisateur doivent se comporter lorsque leur conteneur change de taille. Ce système garantit une mise en page adaptative et cohérente.
Par défaut, les widgets ne sont pas ancrés. L'ancrage en haut à gauche définit le comportement par défaut, avec une position absolue en X et Y, ainsi qu'une taille absolue en hauteur et en largeur.
Dans l'exemple ci-dessous, une page contenant différentes formes est créée pour illustrer le fonctionnement du système d'ancrage.
Cinq ancres ont été définies :
- Le rectangle jaune est ancré en haut, à gauche et en bas.
- Le rectangle marron est ancré en haut, à gauche et à droite.
- Le carré rouge central est ancré sur les quatre bords.
- Le cercle vert est ancré en haut à droite.
- Le cercle bleu est ancré en bas à droite.
Les formes ne sont pas regroupées, mais le principe reste le même : l'ancrage se fait par rapport au conteneur parent. Si le widget n'est pas attaché, il s'ancre par rapport à la page. S'il est attaché à un groupe, il s'ancre par rapport à ce groupe.
Voici le comportement de la page lorsque celle-ci est redimensionné.
La zone défilable
La zone défilable est une option du groupement de widgets qui permet de définir une zone fixe pour un ensemble de widgets, avec l'ajout de barres de défilement verticales et horizontales si nécessaire.
Elle peut être employée dans divers scénarios.
Par exemple, pour concevoir une application responsive, elle peut servir à créer une zone de contenu central ancrée aux quatre bords, permettant ainsi une disposition adaptée aux différentes tailles d'écran.
Résultat obtenue:
La zone flexible
La zone flexible quand à elle permet de définir une zone adaptative pour un groupe de widgets, avec une disposition et une répartition des widgets basées sur des critères d'alignement horizontaux et verticaux (par exemple : aligné à gauche, en haut, centré, espacé uniformément, espacé autour, etc.).
Dans le contexte d’une application responsive, elle peut servir à divers usages : recentrer des éléments quelle que soit la taille de l’écran, faire revenir des éléments à la ligne lorsqu’ils dépassent du cadre, créer des accordéons, et bien plus.
Prenons l’exemple d’un élément centré contenant trois cercles. En fonction de la taille de la page, les cercles doivent revenir automatiquement à la ligne.
Pour cela, nous créons une zone flexible jouant le rôle de conteneur central, ancrée aux quatre bords de l’écran, avec un alignement centré à la fois horizontalement et verticalement. Cette zone contient les trois cercles.
Résultat obtenue:
